/**
 * @note 衣带渐宽终不悔,Bug寻得人憔悴
 * @author yuliang
 * @description 司机端/装货/卸货
 * @createDate 2020/8/25
 *
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  SafeAreaView,
  TouchableOpacity,
  DeviceEventEmitter,
  NativeModules,
  Platform,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { ScrollView } from 'react-native-gesture-handler';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  isAndroid,
} from '../../../../common/styles';
import NavTabs from './components/nav-tab';
import Notes from './components/notes';
import UploadImgs from '../../components/upload-imgs';
import Picker from '../../../../common/picker';
import { Button, msg, Header, BackImage } from '../../../../common';
import { uploadImage } from '../../../../config';
import supply from '../../../../api/supply';

const { Submit } = Button;
export default class ReceiptEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabIndex: [], // 0为备注信息tab   1为上传图片tab
      chooseStartTime: '',
      chooseStartMonth: '',
      chooseStartDay: '',
      chooseStartHour: '',
      chooseEndTime: '',
      chooseEndMonth: '',
      chooseEndDay: '',
      chooseEndHour: '',
      picData: [],
      // 运单Id
      waybillId: '',
      // 来源页面
      routerFrom: '',
      // 运单状态  待上货 = 0(上传装货运单),  运输中 = 1(上传卸货运单),  已送达 = 2(修改运单),
      waybillState: '',
      // 提交数据
      submitData: [],
      // 卸货点/装货点
      placeLoading: '',
      // 卸货时间/装货时间
      timeLoading: '',
      comfirmText: '下一步',
      dataSource: null,
      selectDate: [],
      loadNum: [1, 1], // 装卸数量，最少为1装1卸 loadNum[0]:装货,loadNum[1]:卸货
    };
  }

  tiClick = () => {
    this.choosePutTime();
  };

  // 获取年,月，日
  _getYear() {
    let time = new Date().getTime();
    let date = new Date(time);
    let year = date.getFullYear();
    let obj = [];
    for (let a = 1; a <= 12; a++) {
      obj.push(
        new Object({
          [`${a}月`]: [],
        }),
      );
    }
    let days = [];
    obj.map((ele, index) => {
      if (
        index + 1 == 1 ||
        index + 1 == 3 ||
        index + 1 == 5 ||
        index + 1 == 7 ||
        index + 1 == 8 ||
        index + 1 == 10 ||
        index + 1 == 12
      ) {
        days = [];
        for (var b = 1; b <= 31; b++) {
          days.push(`${b}日`);
        }
        ele[`${index + 1}月`] = days;
      } else if (index + 1 !== 2) {
        days = [];
        for (var b = 1; b <= 30; b++) {
          days.push(`${b}日`);
        }
        ele[`${index + 1}月`] = days;
      } else if ((year % 100 != 0 && year % 4 == 0) || year % 400 == 0) {
        days = [];
        for (var b = 1; b <= 29; b++) {
          days.push(`${b}日`);
        }
        ele[`${index + 1}月`] = days;
      } else {
        days = [];
        for (var b = 1; b <= 28; b++) {
          days.push(`${b}日`);
        }
        ele[`${index + 1}月`] = days;
      }
    });
    // console.log('======>>>', obj[0]['1月'])
    return obj;
  }

  // 获取小时
  createHours() {
    let hours = [];
    let minute = [];
    let obj = [];
    for (let k = 0; k < 24; k++) {
      hours.push((k < 10 ? '0' : '') + k.toString());
    }
    for (let a = 0; a < 60; a++) {
      minute.push((a < 10 ? '0' : '') + a.toString());
    }
    obj = [hours, minute];
    return obj;
  }

  // 打开时间选择器
  choosePutTimes = (val, index) => {
    this.choosePutTime(val, index, '下一步', this._getYear());
    Picker.show();
  };

  // 获取当前时间
  _getcurrentDate = () => {
    let date; let month; let day; let times; let
      obj;
    date = new Date();
    // //月
    month = date.getMonth() + 1;
    // //日
    day = date.getDate();
    // 时间
    times = date.toLocaleTimeString();

    obj = [
      [`${month}月`, `${day}日`],
      [times.split(':')[0], times.split(':')[1]],
    ];

    return obj;
  };

  // 获取时间选择器默认值
  defaultVlaue = (text, val, index) => {
    const { submitData } = this.state;
    let value;
    if (val == 'start' && submitData[index].startTime) {
      // 开始时间存在
      if (text == '下一步') {
        value = [
          `${submitData[index].startTime.split(' ')[0].split('/')[0]}月`,
          `${submitData[index].startTime.split(' ')[0].split('/')[1]}日`,
        ];
      } else if (text == '确定') {
        value = [
          submitData[index].startTime.split(' ')[1].split(':')[0],
          submitData[index].startTime.split(' ')[1].split(':')[1],
        ];
      }
    } else if (val == 'end' && submitData[index].endiTime) {
      // 结束时间存在
      if (text == '下一步') {
        value = [
          `${submitData[index].endiTime.split(' ')[0].split('/')[0]}月`,
          `${submitData[index].endiTime.split(' ')[0].split('/')[1]}日`,
        ];
      } else if (text == '确定') {
        value = [
          submitData[index].endiTime.split(' ')[1].split(':')[0],
          submitData[index].endiTime.split(' ')[1].split(':')[1],
        ];
      }
    } else {
      // 开始时间和结束时间都不存在
      if (text == '下一步') {
        value = this._getcurrentDate()[0];
      } else if (text == '确定') {
        value = value = this._getcurrentDate()[1];
      }
    }

    return value;
  };

  // 选中时间的转换
  selectTimeConvert = (val, index, selectedVlaue) => {
    console.log('2=2=2=2=2=2>>>>', val, index, selectedVlaue);
    const { submitData } = this.state;
    // 回显的时间数据
    let condsReturn =
      `${selectedVlaue[0].split('月')[0]
      }/${
        selectedVlaue[1].split('日')[0]
      } ${
        selectedVlaue[2]
      }:${
        selectedVlaue[3]}`;
    // 提交的时间数据
    let conds =
      `${new Date().getFullYear()
      }-${
        selectedVlaue[0].split('月')[0]
      }-${
        selectedVlaue[1].split('日')[0]
      } ${
        selectedVlaue[2]
      }:${
        selectedVlaue[3]}`;

    if (val == 'start') {
      submitData[index].startTime = condsReturn;
      submitData[index].beginTime = conds;
      this.setState({
        submitData: this.state.submitData,
      });
    } else if (val == 'end') {
      submitData[index].endiTime = condsReturn;
      submitData[index].endTime = conds;
      this.setState({
        submitData: this.state.submitData,
      });
    }
    console.log(this.state.submitData);
  };

  choosePutTime = (val, index, comfirmText, data) => {
    let that = this;
    let daysData = this._getYear();
    // this._getYear()
    Picker.init({
      pickerTitleText: '时间选择',
      pickerCancelBtnText: '取消',
      pickerConfirmBtnColor: [186, 145, 74, 1],
      pickerCancelBtnColor: [102, 101, 100, 1],
      pickerConfirmBtnText: comfirmText,
      selectedValue: this.defaultVlaue(comfirmText, val, index),
      pickerBg: [255, 255, 255, 1],
      pickerToolBarBg: [255, 255, 255, 1],
      pickerFontColor: [186, 145, 74, 1],
      pickerRowHeight: 40,
      pickerData: data,
      onPickerConfirm: (pickedValue, pickedIndex) => {
        if (comfirmText == '下一步') {
          this.setState({
            selectDate: pickedValue,
          });
          this.choosePutTime(val, index, '确定', this.createHours());
          Picker.show();
          console.log('===下一步===>>>', val, index);
        } else {
          this.setState({
            selectDate: [...this.state.selectDate, ...pickedValue],
          });
          console.log('===确定了===>>>', val, index);
          this.selectTimeConvert(val, index, this.state.selectDate);
        }
      },
      onPickerCancel: (pickedValue, pickedIndex) => {
        console.log('date', pickedValue, pickedIndex);
        this.setState({
          selectDate: [],
        });
      },
      onPickerSelect: (pickedValue, pickedIndex) => {
        console.log('date', pickedValue, pickedIndex);
      },
    });
  };

  // 转换时间戳
  timesChange = (time) => {
    let date = new Date(time);
    let times = date.getTime();
    return times;
  };

  // msg提示
  msgTip = (a, state, l, prefix) => {
    /*
     *
     * a  submitData的数据下标
     * state 时间填写了，数据不完整，只填写了一个开始时间，或者一个结束时间
     * l true 为装货单  false为收货单
     * prefix 具体第几装卸货的地名(第1装货地,第1卸货地)
     *
     */
    if (state) {
      if (l) {
        msg.emit('app:tip', { text: `请完善${prefix}的装货起止时间` });
      } else {
        msg.emit('app:tip', { text: `请完善${prefix}的卸货起止时间` });
      }
    } else {
      if (l) {
        msg.emit('app:tip', { text: `${prefix},装货开始时间需早于结束时间` });
      } else {
        msg.emit('app:tip', { text: `${prefix},卸货开始时间需早于结束时间` });
      }
    }
  };

  // 时间转换
  circulation = (data, len, length) => {
    let loading = [];
    let unloading = [];
    for (let a = 0; a < len; a++) {
      loading.push(data[a]);
    }
    for (let i = 0; i < length; i++) {
      unloading.push(data[i + len]);
    }
    return { loading, unloading };
  };

  // 提交
  submit = () => {
    const {
      submitData,
      waybillState,
      waybillId,
      routerFrom,
      loadNum,
    } = this.state;
    console.log(submitData);
    console.log('提交');
    if (waybillState == 1 || waybillState == 0) {
      if (submitData[0].pics.length <= 0) {
        if (waybillState == 0) {
          msg.emit('app:tip', { text: '请上传发货单图片' });
        } else {
          msg.emit('app:tip', { text: '请上传收货单图片' });
        }
      } else if (submitData[0].startTime) {
        // 开始时间存在
        if (!submitData[0].endiTime) {
          // 1结束时间不存在
          if (waybillState == 0) {
            msg.emit('app:tip', { text: '请完善装货起止时间' });
          } else {
            msg.emit('app:tip', { text: '请完善卸货起止时间' });
          }
        } else {
          // 2结束时间存在
          var timeStart =
            `${new Date().getFullYear()}/${submitData[0].startTime}:00`;
          var timeEnd =
            `${new Date().getFullYear()}/${submitData[0].endiTime}:00`;
          if (
            Number(this.timesChange(timeStart)) >=
            Number(this.timesChange(timeEnd))
          ) {
            if (waybillState == 0) {
              msg.emit('app:tip', { text: '装货开始时间需早于结束时间' });
            } else {
              msg.emit('app:tip', { text: '卸货开始时间需早于结束时间' });
            }
          } else {
            this.submitApi();
          }
        }
      } else if (submitData[0].endiTime) {
        if (!submitData[0].startTime) {
          // 1结束时间不存在
          if (waybillState == 0) {
            msg.emit('app:tip', { text: '请完善装货起止时间' });
          } else {
            msg.emit('app:tip', { text: '请完善卸货起止时间' });
          }
        }
      } else {
        this.submitApi();
      }
    } else if (waybillState == 2) {
      let prefix;
      let place = '';
      let stopNext = false;
      for (let a = 0; a < submitData.length; a++) {
        let l = a <= loadNum[0] - 1;
        if (l) {
          prefix = `第${a + 1}装货地`;
          place = '发货单';
        } else {
          prefix = `第${a - loadNum[0] + 1}卸货地`;
          place = '收货单';
        }
        if (submitData[a].pics.length <= 0) {
          msg.emit('app:tip', { text: `请上传${prefix}的${place}图片` });
          stopNext = false;
          break;
        } else if (submitData[a].startTime) {
          // 开始时间存在
          if (!submitData[a].endiTime) {
            // 1结束时间不存在
            // 提示
            this.msgTip(a, true, l, prefix);

            stopNext = false;
            break;
          } else {
            // 2结束时间存在
            var timeStart =
              `${new Date().getFullYear()}/${submitData[a].startTime}:00`;
            var timeEnd =
              `${new Date().getFullYear()}/${submitData[a].endiTime}:00`;
            if (
              Number(this.timesChange(timeStart)) >=
              Number(this.timesChange(timeEnd))
            ) {
              // 开始时间早于等于结束时间
              this.msgTip(a, false, l, prefix);
              stopNext = false;
              break;
            } else {
              stopNext = true;
            }
          }
        } else if (submitData[a].endiTime) {
          // 结束时间存在
          if (!submitData[a].startTime) {
            // 1开始时间不存在
            // 提示
            this.msgTip(a, true, l, prefix);
            stopNext = false;
            break;
          }
        } else {
          stopNext = true;
        }
      }
      if (stopNext) {
        let params;
        let { loading } = this.circulation(submitData, loadNum[0], loadNum[1]);
        let { unloading } = this.circulation(submitData, loadNum[0], loadNum[1]);
        params = {
          id: waybillId,
          loading,
          unloading,
        };
        supply
          .editWayBillPics(params)
          .then((res) => {
            console.log('---ooo---', res);
            if (res.success) {
              msg.emit('app:tip', { text: '修改成功' });
              if (routerFrom == 'DriverWayOrder' || routerFrom == 'DriverMain') {
                // 三端全开
                // msg.emit('router: refreshRoute', {
                //   routeName: 'DriverTab',
                // })
                // 司机端运单端口
                msg.emit('router: refreshRoute', {
                  routeName: 'DriverWayOrder',
                });
                msg.emit('router: goToNext', { routeName: routerFrom });
              } else if (routerFrom == 'DriverOrderDetail') {
                msg.emit('router: refreshRoute', {
                  routeName: routerFrom,
                });
                msg.emit('router: goToNext', {
                  routeName: routerFrom,
                  data: waybillId,
                });
              }
            } else {
              msg.emit('app:tip', { text: res.msg });
            }
          })
          .catch((err) => {
            msg.emit('app:tip', { text: '网络异常' });
          });
      }
      // console.log('修改回单提交数据',waybillId,submitData)
    }
  };

  // 提交数据api //上传发货单，收货单
  submitApi = () => {
    const { routerFrom, waybillState, submitData, waybillId } = this.state;
    let submitApi;
    let params;
    if (waybillState == 0) {
      // 装货回单
      submitApi = supply.uploadLoadingPics;
      params = submitData[0];
    } else if (waybillState == 1) {
      // 卸货回单
      submitApi = supply.uploadUnloadingPics;
      params = submitData[0];
      params.unloadingAddressId = params.loadingAddressId;
    } else if (waybillState == 2) {
      // 修改回单
      params = submitData;
    }
    submitApi(params)
      .then((res) => {
        if (res.success) {
          msg.emit('app:tip', { text: '上传成功' });
          if (routerFrom == 'DriverWayOrder' || routerFrom == 'DriverMain') {
            // 三端全开
            msg.emit('router: refreshRoute', {
              routeName: 'DriverTab',
            });
            // 司机端运单端口
            // msg.emit('router: refreshRoute', {
            //   routeName: 'DriverWayOrder',
            // })
            msg.emit('router: goToNext', { routeName: routerFrom });
          } else if (routerFrom == 'DriverOrderDetail') {
            msg.emit('router: refreshRoute', {
              routeName: routerFrom,
            });
            console.log('提交后是否有数据', waybillId);
            msg.emit('router: goToNext', {
              routeName: routerFrom,
              data: waybillId,
            });
          }
        } else {
          msg.emit('app:tip', { text: res.msg });
        }
      })
      .catch((err) => {
        msg.emit('app:tip', { text: err });
      });
  };

  componentWillUnmount() {
    this.indexListener.remove();
    this.remarkListener.remove();
    Picker.hide();
  }

  componentDidMount() {
    this.indexListener = DeviceEventEmitter.addListener('tabIndex', (res) => {
      this.state.tabIndex[res[0]].index = res[1];
      this.setState({
        tabIndex: this.state.tabIndex,
      });
    });
    this.remarkListener = DeviceEventEmitter.addListener(
      'remark',
      (res, index) => {
        this.state.submitData[index].remark = res;
        this.setState({
          submitData: this.state.submitData,
        });
      },
    );
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { item, routerFrom } = params;
    // console.log('======()()()===>', routerFrom)
    // console.log('=======>>>',item)
    // DriverWayOrder 运单页面
    // 待上货 = 0(装货),  运输中 = 1(卸货),  已送达 = 2(修改),
    // DriverWayOrder 运单列表
    // DriverOrderDetail 运单详情列表
    // DriverMain 司机端首页
    console.log('lyl<================>', item);
    let BILL_ID; let
      BILL_STATE;
    /*
     *
     * BILL_ID  运单id
     * BILL_STATE  运单状态
     *
     */
    if (routerFrom == 'DriverWayOrder' || routerFrom == 'DriverMain') {
      BILL_ID = item.id;
      BILL_STATE = item.state;
    } else if (routerFrom == 'DriverOrderDetail') {
      BILL_ID = item.wayBill.id;
      BILL_STATE = item.wayBill.state;
    }

    this.setState({
      waybillId: BILL_ID,
      routerFrom,
      waybillState: BILL_STATE,
    });
    if (BILL_STATE == 0 || BILL_STATE == 1) {
      // 装货单 收货单
      this.getAddr(BILL_ID, BILL_STATE);
    } else if (BILL_STATE == 2) {
      // 修改回单
      this.getWayBillPics(BILL_ID);
    }
  }

  // 转换时间渲染页面
  getTimes = (times) => {
    console.log('时间查看========》》》》', times.split(' ')[0].split('-')[1]);
    if (Number(times.split(' ')[0].split('-')[1]) < 10) {
      return (
        `${Number(times.split(' ')[0].split('-')[1])
        }/${
          times.split(' ')[0].split('-')[2]
        } ${
          times.split(' ')[1].split(':')[0]
        }:${
          times.split(' ')[1].split(':')[1]}`
      );
    }
    return (
      `${times.split(' ')[0].split('-')[1]
      }/${
        times.split(' ')[0].split('-')[2]
      } ${
        times.split(' ')[1].split(':')[0]
      }:${
        times.split(' ')[1].split(':')[1]}`
    );
  };

  // 获取回单详情
  getWayBillPics = (id) => {
    let params = {
      id,
    };
    supply
      .getWayBillPics(params)
      .then((res) => {
        if (res.success) {
          let { loading } = res.data;
          let { unloading } = res.data;
          // 获取装卸数量
          this.setState({
            loadNum: [loading.length, unloading.length],
          });

          let dataSourceload = [];
          let tabIndex = [];
          let source = [...loading, ...unloading];
          source.map((ele, index) => {
            if (
              ele.pics == null ||
              ele.pics == undefined ||
              !ele.pics instanceof Array
            ) {
              ele.pics = [];
            }
            dataSourceload.push(ele);
            if (ele.beginTime) {
              dataSourceload[index].startTime = this.getTimes(ele.beginTime);
            }
            if (ele.endTime) {
              dataSourceload[index].endiTime = this.getTimes(ele.endTime);
            }
            tabIndex.push({ index: 0 });
          });
          console.log('liang===============>>>>', dataSourceload);
          this.setState({
            waybillId: res.data.id,
            tabIndex: tabIndex,
            submitData: dataSourceload,
          });
          console.log('submitData', this.state.submitData);
        } else {
          msg.emit('app:tip', { text: res.msg });
          console.log('err1');
        }
      })
      .catch((err) => {
        console.log('错误打印', err);
        msg.emit('app:tip', { text: '网络异常' });
        console.log('err2');
      });
  };

  // 获取装货单地址、收货单地址
  getAddr = (id, state) => {
    let getApi;
    if (state == 0) {
      // 装货地址
      getApi = supply.getWayBillLoadingInfo;
    } else if (state == 1) {
      // 卸货地址
      getApi = supply.getWayBillUnloadingInfo;
    }
    getApi({ id })
      .then((res) => {
        if (res.success) {
          console.log('获取到装卸运单的地址', res.data);
          let addressObj = {
            city: res.data.city,
            district: res.data.district,
            addressDetails: res.data.addressDetails,
          };
          let addrs = '';
          for (let i in addressObj) {
            if (addressObj[i]) {
              addrs += addressObj[i];
            }
          }
          this.setState({
            submitData: [
              {
                wayBillId: id,
                loadingAddressId: res.data.id,
                beginTime: '',
                endTime: '',
                pics: [],
                address: addrs,
              },
            ],
            tabIndex: [{ index: 0 }],
          });
        } else {
          msg.emit('app:tip', { text: res.msg });
        }
      })
      .catch((err) => {
        msg.emit('app:tip', { text: '网络异常' });
      });
  };

  // 图片上传
  uploadImg = (index) => {
    NativeModules.DataModule.chooseImage((path, imageBase64) => {
      this.IdCardUpload(path, index);
    });
  };

  // 上传图片到oss
  IdCardUpload = (path, index) => {
    NativeModules.WindowModule.showLoading();
    uploadImage('upload?dirName=carWl', path)
      .then((res) => {
        // 请求成功
        if (res.success) {
          this.state.submitData[index].pics = [
            ...this.state.submitData[index].pics,
            res.data.url,
          ];
          this.setState({
            submitData: this.state.submitData,
          });
        } else {
          NativeModules.WindowModule.showWindow(
            { content: '遇到网络错误，请重试', onlyRightBtn: '1' },
            (e) => {},
          );
        }
        NativeModules.WindowModule.dismissLoading();
      })
      .catch((err) => {
        NativeModules.WindowModule.dismissLoading();
        // 请求失败
        NativeModules.WindowModule.showWindow(
          { content: '遇到网络错误，请重试', onlyRightBtn: '1' },
          (e) => {},
        );
      });
  };

  // 删除图片
  picDel = (i, index) => {
    const { submitData } = this.state;
    submitData[i].pics.splice(index, 1);
    this.setState({
      submitData,
    });
  };

  loadIcon = (ele, index) => {
    // 待上货 = 0(装货),  运输中 = 1(卸货),  已送达 = 2(修改),
    const { waybillState, loadNum } = this.state;
    let entrance;
    if (waybillState == 1) {
      // 卸货
      entrance = 1;
    } else if (waybillState == 0) {
      // 装货
      entrance = 0;
    } else if (waybillState == 2) {
      // 修改回单
      if (index <= loadNum[0] - 1) {
        entrance = 0;
      } else {
        entrance = 1;
      }
    }
    if (entrance == 0) {
      return (
        <View style={styles.flex}>
          <LinearGradient
            colors={['#7EE35E', '#2CBD26']}
            style={[styles.addressMark]}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
          >
            <Text style={{ color: mainBgColorWhite }}>装</Text>
          </LinearGradient>
          <Text style={[styles.addressTopText]}>装货地</Text>
        </View>
      );
    } if (entrance == 1) {
      return (
        <View style={styles.flex}>
          <LinearGradient
            colors={['#F48F25', '#EB2F2F']}
            style={styles.addressMark}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
          >
            <Text style={{ color: mainBgColorWhite }}>卸</Text>
          </LinearGradient>
          <Text style={[styles.addressTopText]}>卸货地</Text>
        </View>
      );
    }
  };

  // 装收货单
  placeLoading = (index) => {
    const { waybillState, loadNum } = this.state;
    if (waybillState == 0) {
      return '发货单';
    } if (waybillState == 1) {
      return '收货单';
    } if (waybillState == 2) {
      console.log('====>装货单数量最大下标', loadNum[0] - 1);
      if (index <= loadNum[0] - 1) {
        return '发货单';
      }
      return '收货单';
    }
  };

  // 装卸货时间
  timeLoading = (index) => {
    const { waybillState, loadNum } = this.state;
    if (waybillState == 0) {
      return '装货时间';
    } if (waybillState == 1) {
      return '卸货时间';
    } if (waybillState == 2) {
      if (index <= loadNum[0] - 1) {
        return '装货时间';
      }
      return '卸货时间';
    }
  };

  render() {
    const {
      submitData,
      tabIndex,
      routerFrom,
      timeLoading,
      placeLoading,
      waybillState,
    } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <Header
          title={
            waybillState == 0 || waybillState == 1 ? '上传回单' : '修改回单'
          }
          renderLeft={() => {
            return (
              <TouchableOpacity
                activeOpacity={0.8}
                style={
                  isAndroid
                    ? { paddingVertical: px2dp(14), paddingHorizontal: px2dp(40) }
                    : { paddingVertical: px2dp(14), paddingRight: px2dp(40) }
                }
                onPress={() => {
                  msg.emit('router: goToNext', { routeName: routerFrom });
                }}
              >
                <BackImage />
              </TouchableOpacity>
            );
          }}
          renderRight={() => {}}
        />
        <ScrollView style={styles.mainScroll}>
          {submitData.map((ele, index) => (
            <View
              style={
                index == submitData.length - 1
                  ? [styles.main, styles.mt, styles.mb]
                  : [styles.main, styles.mt]
              }
            >
              <View style={styles.addressTop}>
                {this.loadIcon(ele, index)}
                <View>
                  <Text
                    style={{ width: px2dp(450), textAlign: 'right' }}
                    numberOfLines={1}
                  >
                    {ele.address}
                  </Text>
                </View>
              </View>
              <View style={styles.ReceiptEdit}>
                <View style={styles.uploadText}>
                  <Text style={styles.textBlack}>
                    {this.placeLoading(index)}
                  </Text>
                  <Text style={styles.textGray}>(必填)</Text>
                </View>
                {/* <NavTabs
                  left={'发货单'}
                  right={'发货备注'}
                  activeStyle={styles.active}
                  defaultStyle={styles.default}
                  tabIndex={tabIndex}
                  index={index}
                /> */}
                {tabIndex[index].index == 1 ? (
                  // 备注
                  <Notes remark={ele.remark} index={index} />
                ) : (
                  <UploadImgs
                    // 图片上传
                    length={8}
                    mr={{ marginRight: px2dp(7.5) * 2 }}
                    lineLength={4}
                    uploadImage={this.uploadImg}
                    picDelete={this.picDel}
                    picData={ele.pics}
                    index={index}
                  />
                )}
              </View>
              <View style={styles.times}>
                <View style={styles.flex}>
                  <Text style={styles.textBlack}>
                    {this.timeLoading(index)}
                  </Text>
                  <Text style={styles.textGray}>(选填)</Text>
                </View>
                <View style={styles.timePicker}>
                  <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                      this.choosePutTimes('start', index);
                    }}
                    style={styles.timeStart}
                  >
                    <Text style={styles.timeTextLeft}>开始</Text>
                    <Text style={styles.timeTextCenter}>{ele.startTime}</Text>
                    <Image
                      style={{ width: px2dp(12) * 2, height: px2dp(12) * 2 }}
                      source={require('../../../../image/wl/car_bottom.png')}
                    />
                  </TouchableOpacity>
                  <View style={styles.border} />
                  <TouchableOpacity
                    activeOpacity={1}
                    onPress={() => {
                      this.choosePutTimes('end', index);
                    }}
                    style={styles.timeEnd}
                  >
                    <Text style={styles.timeTextLeft}>完成</Text>
                    <Text style={styles.timeTextCenter}>{ele.endiTime}</Text>
                    <Image
                      style={{ width: px2dp(12) * 2, height: px2dp(12) * 2 }}
                      source={require('../../../../image/wl/car_bottom.png')}
                    />
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          ))}
        </ScrollView>
        <View style={styles.submit}>
          <Submit
            text='提交'
            btnTextStyle={{
              fontSize: px2dp(36),
            }}
            boxStyle={{
              width: px2dp(320) * 2,
              height: px2dp(48) * 2,
              borderRadius: px2dp(6) * 2,
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            disabled={false}
            onClick={() => {
              this.submit();
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: mainBgColorLightGray,
    flex: 1,
  },
  mainScroll: {
    paddingLeft: px2dp(12) * 2,
    paddingRight: px2dp(12) * 2,
    backgroundColor: mainBgColorLightGray,
    flex: 1,
  },
  main: {
    width: '100%',
    backgroundColor: '#fff',
    borderRadius: px2dp(8) * 2,
  },
  mb: {
    marginBottom: px2dp(100) * 2,
  },
  submit: {
    width: '100%',
    height: px2dp(60) * 2,
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: px2dp(22),
  },
  mt: {
    marginTop: px2dp(16) * 2,
  },
  addressTop: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: px2dp(16) * 2,
    paddingBottom: px2dp(16) * 2,
    paddingLeft: px2dp(12) * 2,
    paddingRight: px2dp(12) * 2,
    borderBottomWidth: px2dp(1) * 2,
    borderColor: '#F0EFEF',
  },
  addressTopText: {
    fontSize: px2dp(16) * 2,
    color: '#343332',
    marginLeft: px2dp(8) * 2,
    fontWeight: 'bold',
  },
  flex: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  addressMark: {
    width: px2dp(40),
    height: px2dp(40),
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: px2dp(6),
  },
  ReceiptEdit: {
    padding: px2dp(12) * 2,
  },
  uploadText: {
    marginBottom: px2dp(12) * 2,
    flexDirection: 'row',
    alignItems: 'center',
  },
  active: {
    backgroundColor: '#fff',
  },
  normal: {
    backgroundColor: '#F0EFEF',
  },
  times: {
    padding: px2dp(12) * 2,
    paddingTop: 0,
  },
  textBlack: {
    fontSize: px2dp(16) * 2,
    color: '#343332',
    fontWeight: 'bold',
  },
  textGray: {
    fontSize: px2dp(14) * 2,
    color: '#999896',
  },
  timePicker: {
    width: '100%',
    height: px2dp(28) * 2,
    marginTop: px2dp(14) * 2,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  border: {
    width: px2dp(2),
    height: px2dp(28) * 2,
    backgroundColor: '#D8D8D8',
  },
  timeStart: {
    width: '45%',
    height: px2dp(28) * 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  timeEnd: {
    width: '45%',
    height: px2dp(28) * 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  timeTextLeft: {
    fontSize: px2dp(14) * 2,
    color: '#999896',
  },
  timeTextCenter: {
    fontSize: px2dp(14) * 2,
    color: '#343332',
  },
});
